{extend name="public/common"}

{block name="style"}
<link rel="stylesheet" href="__HOME__/css/test/testlist.css">
<link rel="stylesheet" href="__ADMIN__/css/chosen/chosen.css">
<style>
    .defaults img {
        width: 16vw;
        position: absolute;
        left: 50%;
        margin-left: -8vw;
        top: 35%;
    }
    .showbox {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5%;
        background: rgba(0, 0, 0, 0.3);
        display: none;
    }

    .loader {
        position: relative;
        margin: 0 auto;
        width: 100px;
        margin-top: 70%;
    }
    .loader:before {
        content: '';
        display: block;
        padding-top: 50%;
    }

    .circular {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    .path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }
        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
    @keyframes color {
        100%,
        0% {
            stroke: #d62d20;
        }
        40% {
            stroke: #0057e7;
        }
        66% {
            stroke: #008744;
        }
        80%,
        90% {
            stroke: #ffa700;
        }
    }
</style>
{/block}

{block name="body"}
<div class="top_menu">
    <div class="xh-menu xh-year" data-msg="year">
        <span class="son" t_num=""></span>
        <span class="fa fa-angle-down"></span>
    </div>
</div>
<div class="fuzzy">
    <div class="y_m_List">
        <div class="year">
            {volist name="years" id="vo"}
            <div class="yearL cho" data-num="{$vo.year}">{$vo.year}年</div>
            {/volist}
        </div>
        <br style="clear:both"/>
    </div>
</div>
<div id="vo-box">
    {empty name="list"}
    <div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>
    {else/}
    {volist name="list" id="vo"}
    <div class="listBox">
        <div class="guide">
            <span>{$key}月</span>
            (共<span>{$vo|count}</span>篇)
        </div>
        {volist name="vo" id="co"}
        <div class="log_list">
            <a href="{:url('Test/detail?id='.$co['id'])}">
                <div class="list">
                    <span class="day">{$co.create_time|time_format="d"}</span>
                    <span class="log_title">{$co.class}&nbsp;/&nbsp;{$co.class2}</span>
                    <span class="log_title">{$co.class4}&nbsp;{$co.score}分<span style="float: right">详情 >></span></span>
                </div>
            </a>
            <br style="clear:both"/>
        </div>
        {/volist}
    </div>
    {/volist}
    {/empty}
</div>
<div class="showbox">
    <div class="loader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
        </svg>
    </div>
</div>
{/block}

{block name="script"}
<script src="__ADMIN__/js/chosen.jquery.js"></script>
<script>
    $('title' ).text('点对点教育VIP学员_测试提交');
    $(".showbox").hide();
    //关闭分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
    var w_w = $(window).width();
    var w_h = $(window).height()-44;
    var fuzzy =$('.fuzzy');
    var this_year = new Date().getFullYear();
    fuzzy.css({'width':w_w,'height':w_h});
    $('.xh-year').find('.son').text(this_year+'年').attr('t_num',this_year);
    function select_y_m(){
        var menu = $('.xh-menu');
        function defalut(m){
            var it = $(m);
            var angle = it.find('.fa');
            var y_m = it.data('msg');
            var this_y_m = fuzzy.find('.'+y_m);
            angle.removeClass('fa-angle-up').addClass('fa-angle-down');
            fuzzy.hide();
            this_y_m.hide();
        }
        menu.each(function(){
            $(this).off("click").on('click',function(){
                var other;
                var it = $(this);
                var angle = it.find('.fa');
                var y_m = it.data('msg');
                var this_y_m = fuzzy.find('.'+y_m);
                var isshow = angle.hasClass('fa-angle-down');
                if(it.hasClass("xh-year")){
                    other = it.next();
                }else{
                    other = it.prev();
                }
                if(isshow){
                    //恢复默认
                    defalut(other);
                    //切换显示
                    angle.removeClass('fa-angle-down').addClass('fa-angle-up');
                    fuzzy.show();
                    this_y_m.show();
                    this_y_m.find('.cho').each(function(){
                        $(this).off("click").on('click',function(){
                            var this_cho = $(this);
                            var userid = "{$userid}";
                            var t_num = this_cho.data('num');
                            it.find('.son').text(this_cho.text());
                            it.find('.son').attr('t_num',t_num);
                            var year_num = $('.xh-year').find('.son').attr('t_num');
                            $.ajax({
                                type:'POST',
                                url:"{:Url('Test/testlist')}",
                                data:{
                                    year:year_num,
                                    openid:userid
                                },
                                dataType: "json",
                                beforeSend: function(XMLHttpRequest){
                                    $(".showbox").show();
                                },
                                success:function(data){
                                    $(".showbox").hide();
                                    $('.fuzzy').hide();
                                    var obj = data.data,
                                        newHtml = '';
                                    if (data.data.length == 0){
                                        $("#vo-box").html('<div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>')
                                    }else{
                                        for(var key in obj){
                                            if(typeof obj[key] === 'object'){
                                                newHtml += '<div class="listBox"><div class="guide"><span>'+key+'月</span>(共<span>'+obj[key].length+'</span>篇)</div>';
                                                for(var i= 0 ,len = obj[key].length;i<len;i++){
                                                    newHtml += '<div class="log_list">'+
                                                            '<a href="/DDDeducation/public/index.php/home/test/detail/id/'+obj[key][i].id+'".html>'+
                                                            '<div class="list">'+
                                                            '<span class="day">'+obj[key][i].day+'</span>'+
                                                            '<span class="log_title">'+obj[key][i].class+'&nbsp;/&nbsp;'+obj[key][i].class2+'</span>'+
                                                            '<span class="log_title">'+obj[key][i].class4+'&nbsp;'+obj[key][i].score+'分<span style="float: right">详情 >></span></span>'+
                                                            '</div>'+
                                                            '</a>'+
                                                            '<br style="clear:both"/>'+
                                                            '</div>';
                                                }
                                                newHtml += '</div>';
                                            }
                                        }
                                        $('#vo-box').html(newHtml);
                                    }
                                }
                            });
                        });
                    });
                    fuzzy.click(function(){
                        fuzzy.hide();
                        var reset = $(".xh-menu");
                        defalut(reset);
                    })

                }else{
                    angle.removeClass('fa-angle-up').addClass('fa-angle-down');
                    fuzzy.hide();
                    this_y_m.hide();
                }

            });
        });
    }

    select_y_m();
</script>
{/block}